<!DOCTYPE html>
<html lang="en">
<head>
    <base id="base" href="${base}">
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/static/login/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="/static/login/css/demo.css" />
    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="/static/login/css/component.css" />
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <script type="text/javascript" src="/static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js"></script>
    <style>
        a
        {
            color:yellowgreen;
        }
    </style>
</head>
<body>
<div class="container demo-1">
    <div class="content">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>
            <div class="logo_box">
                <h3>欢迎 登录</h3>
                <form action="#" name="f" method="get">
                    <div class="input_outer">
                        <span class="u_user"></span>
                        <input name="user_name" class="text" style="color: #04569A !important" type="text" placeholder="请输入账户">
                    </div>
                    <div class="input_outer">
                        <span class="us_uer"></span>
                        <input name="password" class="text" style="color: #EAA90B !important; position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码">
                    </div>

                    <div class="input_outer">
                        <span class="us_uer"></span>
                        <input  placeholder="请输入验证码" name="captcha" class="text" required lay-verify="captcha" style="width:200px;" style="color: #FFFFFF !important;" style="color:white">
                        <img onclick="this.src='{:captcha_src()}?'+Math.random()" src="{:captcha_src()}" alt="captcha" style="width:130px;height:50px;margin-top:-70px;margin-left:210px;" />
                    </div>

                    <a href="{:url('admin/index/phone')}" class="fl" style="float: left">手机验证登录</a><a href="javascript:;" class="fr" style="float: right">忘记密码？</a>

                    <div class="mb2" style="padding-top:20px"><a id = "sub" lay-filter="sub" class="act-but submit" href="javascript:;" style="color: #FFFFFF">登录</a>
                    </div>

            <p><a href="{:url('admin/login/loginout')}" style="float: right"><h2>该退了</h2></a></p>
            </form>
        </div>
    </div>

</div><!-- /container -->
<script src="/static/login/js/TweenLite.min.js"></script>
<script src="/static/login/js/EasePack.min.js"></script>
<script src="/static/login/js/rAF.js"></script>
<script src="/static/login/js/demo-1.js"></script>
</body>
<script>
    //加载弹出层组件
    layui.use('layer',function(){

        var layer = layui.layer;

        //登录的点击事件
        $("#sub").on("click",function(){
            login();
        })

        $("body").keydown(function(){
            if(event.keyCode == "13"){
                login();
            }
        })

        //登录函数
        function login(){
            var user_name = $(" input[ name='user_name' ] ").val();
            var password = $(" input[ name='password' ] ").val();
            var captcha = $(" input[ name='captcha' ] ").val();
            $.ajax({
                url:"{:url('admin/login/login_do')}",
                data:{"user_name":user_name,"password":password,"captcha":captcha},
                type:"get",
                dataType:"json",
                success:function(data){
                    if(data.code == 200){
                        layer.msg("登录成功",{icon: 1,time:1000},function () {
                            window.location = "{:url('admin/auth/index')}";
                        });
                    }else{
                        layer.msg(data.msg);
                    }
                }
            })
        }
    })
</script>
</html>